import React, { FC, useState, useEffect } from 'react'
import { getUserInfo } from '~/mock/user/userinfo'
import TopHeader, { ListTitle } from '~/components/top-header'
import { queryLawDocs } from '~/api/query-api/'
import MoveList from './container/moved-list'
import { useNavigate, useLocation } from 'react-router-dom'
import { FooterAction } from '~/pages/transfer-property-page/property-involved/styled'
import { Button } from 'antd'

const LawDetail: FC = () => {
  const { state }: any = useLocation()
  const [moveList, setMoveList] = useState([])
  const navigate = useNavigate()

  interface QueryListProps {
    caseName?: string
    caseNo?: string
  }


  const { caseCompanyName, caseDepartmentName, caseName, caseNo, createTime, caseState, batchNo } = state


  const handleGetQueryMoveList = async () => {
    const userInfo = getUserInfo()
    const { data } = await queryLawDocs({
      ...userInfo,
      caseName,
      caseNo,
      itemOptType: 'DEAL'
    })
    setMoveList(data)
  }

  useEffect(() => {
    console.log('666')
    handleGetQueryMoveList()
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  const headData = [
    {
      childen: [
        {
          label: '案件编号:',
          value: caseNo
        },
        { label: '案件名称:', value: caseName }
      ]
    },
    {
      childen:
        [
              { label: '办案单位:', value: caseCompanyName },
              { label: '办案部门:', value: caseDepartmentName }
            ]
    }
  ]

  return (
    <div>
      <TopHeader headData={headData} />
      <ListTitle title="法律文书列表" />
      <main style={{ marginTop: 21 }}>
        <MoveList moveList={moveList} />
        <FooterAction>
          <div>
            <Button
              onClick={() => {
                navigate(-1)
              }}
            >
              返回
            </Button>
          </div>
        </FooterAction>
      </main>
    </div>
  )
}

export default LawDetail
